/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div style="height: 100%">
        <span class="content-container__title">工作空间</span>
        <div class="project-index__wrap">
            <div class="project-nav__left">
                <div class="project-nav__total">
                    <div class="project-nav__list">
                        <div
                            v-for="(item, index) in projectNavList"
                            :key="index"
                            class="project-nav__item"
                            :class="{'project-nav__list-nav-disabled': item.disabled}">
                            <div class="project-nav__title"
                                 :class="{ active: item.index === defaultActive}"
                                 :title="item.tips"
                                 @click="_handleClickProjectNav(item)">
                            <span class="nav-icon iconfont"
                                  :class="item.icon"></span>
                                {{ item.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="project-index__container">
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import {deepClone} from 'src/util/deep_clone';
import {Vue, Component, Watch} from 'vue-property-decorator';
import Bus from 'src/util/bus.js'

interface ProjectParams {
    id?: string;
    title: string;
    index: string;
    disabled: Boolean;
    tips: string;
}

@Component
export default class ProjectIndex extends Vue {
    projectNavList = [
        {
            title: _('云 IDE'),
            icon: 'iconpython-file-',
            index: '/project_manager/project_index/cloud_ide',
            disabled: false,
            tip: ''
        },
        // {
        //     title: _('模型训练'),
        //     icon: 'icon-_moxingxunlian',
        //     index: '/project_manager/project_index/model-training',
        //     disabled: true,
        //     tips: '即将上线'
        // },
        // {
        //     title: _('模型部署'),
        //     id: 'moxing',
        //     icon: 'iconmoxingxunlian',
        //     index: '/project_manager/project_index/model_deployment',
        //     disabled: true,
        //     tips: '即将上线'
        // },
        {
            title: _('我的数据集'),
            id: 'dataset',
            icon: 'iconguanlishujuji',
            index: '/project_manager/project_index/my_dataset',
            disabled: false,
            tips: ''
        }
    ];
    
    defaultActive = '/project_manager/project_index/cloud_ide';
    
    get projectName() {
        return this.$route.query.name;
    }
    
    get path() {
        return this.$route.path;
    }
    
    @Watch('path', {deep: true, immediate: true})
    routeNameChange() {
        this.defaultActive = this.path;
    }
    
    _handleClickProjectNav(item: ProjectParams) {
        if (item.disabled) {
            return;
        }
        if(this.defaultActive === item.index) {
            return;
        }
        this.defaultActive = item.index;
        let query = deepClone(this.$route.query);
        if (query.periodic) {
            delete query.periodic;
        }
        this.$router.push({
            path: item.index,
            query
        });
    }
    
    _returnProject() {
        // 利用Bus.$emit 返回的时候刷新一下表格重新更新数据
        Bus.$emit("refresh-project-list");
        this.$router.push({
            path: '/project_manager'
        });
    }
}
</script>
<style lang="less">
.content-container__title {
    display: inline-block;
    padding-left: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #000000;
    height: 16px;
    line-height: 16px;
    border-left: 4px solid #1770E6;
}

.project-index__wrap {
    display: flex;
    height: calc(100% - 32px);
    background-color: #fff;
    .project-nav__left {
        background-color: #f8f8fa;
    
    }
    .project-nav__list {
        margin-top: 24px;
        .project-nav__header {
            display: flex;
            margin: 34px 0 40px 23px;
            
            .return-btn {
                color: #2C2A2A;
                cursor: pointer;
            }
            
            .project-name {
                margin-left: 17px;
                color: #999;
            }
        }
    }
    
    .project-nav__item {
        font-size: 14px;
        color:  #333333;;
        width: 233px;
        text-indent: 8px;
        cursor: pointer;
        line-height: 44px;
        
        .project-nav__title {
            
            &:hover {
                color: #365FD9;
            }
            &.active {
                color: #365FD9;
                background: #ffffff;
            }
            
            .nav-icon {
                margin-left: 21px;
                margin-right: 8px;
            }
        }
    }
    
    .project-nav__list-nav-disabled {
        .project-nav__title:hover,
        .project-nav__title.active {
            color: #999;
            background: #fff;
        }
    }
    
    .project-index__container {
        // padding: 0 24px;
        width: calc(100% - 160px);
    }
}
</style>
